<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">生肖运势</p>
        </h3>
        <div>
          <div>
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <el-form-item label="选择生肖：" prop="lang">
                <el-select v-model="form.title_yunshi">
                  <el-option
                    v-for="(item, index) in sx"
                    :key="index"
                    :label="item.sx"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="语言：" prop="lang">
                <el-radio-group v-model="form.lang">
                  <el-radio label="zh-cn">中文</el-radio>
                  <el-radio label="en-us">英文</el-radio>
                  <el-radio label="zh-tw">繁体</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >立即测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.测算结果若是理想，固然是一件可喜可贺的事情，如果测算结果不理想，缘主也不必灰心。缘主的命运，即便算得再准，也还是需要缘主自己去把握。算命的目的是为了趋吉避凶，顺势而行。
          </p>
          <p>
            2.正所谓一命二运三风水，四积阴德五读书，六名七相八敬神，九交贵人十修身。平时积善行德，心存善念，必有善行，善念善行，天必佑之。
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="" v-if="result">
        <div class="yjnshi">
          <p style="text-align: center; font-weight: 800">今日运势</p>

          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">速配生肖</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["速配生肖"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">提防生肖</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["提防生肖"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运颜色</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["幸运颜色"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运数字</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["幸运数字"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运宝石</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["幸运宝石"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">综合分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["综合分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">爱情分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["爱情分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">事业分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["事业分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">心情分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["心情分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">交际分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["交际分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">今明运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["今明运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">爱情运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["爱情运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">事业运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["事业运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">财富运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["财富运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">健康运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["健康运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">财富分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["交际分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">健康分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["今日运势"]["健康分数"] }}</p>
            </div>
          </div>
        </div>
        <div class="yjnshi">
          <p style="text-align: center; font-weight: 800">明日运势</p>

          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">速配生肖</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["速配生肖"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">提防生肖</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["提防生肖"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运颜色</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["幸运颜色"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运数字</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["幸运数字"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">幸运宝石</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["幸运宝石"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">综合分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["综合分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">爱情分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["爱情分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">事业分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["事业分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">心情分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["心情分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">交际分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["交际分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">今明运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["今明运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">爱情运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["爱情运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">事业运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["事业运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">财富运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["财富运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">健康运势</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["健康运势"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">财富分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["交际分数"] }}</p>
            </div>
          </div>
          <div class="infos">
            <div class="title3">
              <span class="shu"></span>
              <span class="ti">健康分数</span>
            </div>
            <div class="content">
              <p class="details">{{ result["明日运势"]["健康分数"] }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",
      sx: [
        {
          value: 0,
          xz: "白羊座",
          sx: "鼠",
        },
        {
          value: 1,
          xz: "金牛座",
          sx: "牛",
        },
        {
          value: 2,
          xz: "双子座",
          sx: "虎",
        },
        {
          value: 3,
          xz: "巨蟹座",
          sx: "兔",
        },
        {
          value: 4,
          xz: "狮子座",
          sx: "龙",
        },
        {
          value: 5,
          xz: "处女座",
          sx: "蛇",
        },
        {
          value: 6,
          xz: "天秤座",
          sx: "马",
        },
        {
          value: 7,
          xz: "天蝎座",
          sx: "羊",
        },
        {
          value: 8,
          xz: "射手座",
          sx: "猴",
        },
        {
          value: 9,
          xz: "魔羯座",
          sx: "鸡",
        },
        {
          value: 10,
          xz: "水瓶座",
          sx: "狗",
        },
        {
          value: 11,
          xz: "双鱼座",
          sx: "猪",
        },
      ],
      result: null,
      area: "",
      form: {
        type: 1,
        lang: "zh-cn",
        title_yunshi: 0,
        api_key: "FNcQHQuf0W8wDrXMjWc0xqTzw",
      },

      rules: {},
    };
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 这里处理提交逻

          let config = {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          };
          this.$axios
            .post(window.config.apiUrl + "/v1/Zhanbu/yunshi", this.form, config)
            .then((res) => {
              if (res.data.errcode == -1) {
                this.$message({
                  type: "warning",
                  message: res.data.errmsg,
                });

                return;
              }

              this.centerDialogVisible = true;
              this.result = res.data.data;
              console.log(this.result);
            });
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bd {
  border: 1px solid #e5e5e5;
}

.cesaun_container {
}

::v-deep .el-card.is-always-shadow {
  box-shadow: none !important;
}

::v-deep .el-card__header {
  padding: 10px 20px !important;
}

.form-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

.form-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  text-align: left;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-radio {
  margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
  width: 100% !important;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog {
  margin-top: 10px !important;
}

.dialog_cesuan {
  margin-top: 0 !important;
  overflow: hidden;
  height: calc(100vh - 100px);
  overflow: auto;

  .infos {
    margin-top: 15px;

    .title3 {
      display: flex;
      padding: 20px;

      .shu {
        width: 5px;
        height: 20px;
        background-color: #e6a84b;
        border-radius: 10px;
      }

      .ti {
        padding-left: 6px;
        font-weight: 800;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      margin-left: 18px;
      margin-right: 18px;

      .items {
        width: 50%;
        margin-top: 15px;
        font-size: 14px;
      }

      .details {
        font-size: 14px;
        user-select: all;
      }
    }
  }
}
</style>